<template>
    <div class="app-container">
        <el-row  class="mb8">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams" ref="queryForm" :inline="true" style="display:flex" label-width="68px">
                    <my-form :form='queryParams' :options="queryParamsForm"></my-form>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery(queryParams)">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery('queryForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <Table :list='list' :loading='loading' :tableColumns='tableColumns'></Table>
        
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList"  />
        
    </div>
</template>
<script>
import {userListAPI} from '@/api/ka/ka'
import Table from '@/views/components/myTable'
import myForm from '@/views/components/myForm'
export default {
    components:{
        Table,
        myForm
    },
    data() {
        return {
            loading:true,
            queryParamsForm:[
                {title:'ID',key:'id',type:'text',styleWidth:'240px'},
                {title:'用户名称',key:'name',type:'text',styleWidth:'240px'},
                {title:'手机号',key:'cellphone',type:'text',styleWidth:'240px'},
                {title:'wxUnionid',key:'wxUnionid',type:'text',styleWidth:'240px'},
            ],
            tableColumns:[
                {label:'ID',param:'id'},
                {label:'用户名称',param:'name'},
                {label:'用户手机号',param:'cellphone'},
                {label:'头像',param:'avatar', type:'userImages'},
                {label:'wxUnionid',param:'wxUnionid'},
                {label:'创建时间',param:'createdAt',
                    render: row => {
                        return row.createdAt.replace('T',' ').substring(0,16)
                    }
                },
            ],
            list:[],
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            total:0,

        }
    },
    created(){
        this.getList()
    },
    methods:{
        //列表
        getList(){
            this.loading = true;
            userListAPI(this.queryParams).then(res=>{
                this.list = res.data.rows;
                this.total = res.data.total;
                this.loading = false;
            })
        },
        //清空搜索条件
        searchReset(){
            this.queryParams = {
                pageNo: 1,
                pageSize: 10,
                id:'',
                name:'',
                cellphone:'',
            }
        },
        /** 搜索按钮操作 */
        handleQuery(obj) {
            this.searchDelVal(obj)
            this.queryParams.pageNo = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery(refName) {
            this.resetForm(refName);
            this.handleQuery();
            this.searchReset();
        },
        

    }
}
</script>
<style scoped>

</style>